<template>
  <div class="inside-page">
    <div class="com" style="min-height: 440px">
      <Banner :banner="bannerList" />
    </div>
    <div class="section">
      <div class="com" style="min-height: 760px">
        <Choice-Online :online-list="onlineList" />
      </div>
      <div class="com" style="min-height: 760px">
        <Choice-Offline :offline-list="offlineList" />
      </div>
      <div class="com" style="min-height: 460px">
        <Reco :company="company" />
      </div>
    </div>
  </div>
</template>

<script>
import { getChoice } from '@/api/choice';

export default {
  asyncData ({ params, error }) {

  },
  components: {},
  data () {
    return {
      onlineList: [],
      offlineList: [],
      bannerList: [],
      company: []
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.fetchData();
  },
  mounted () {
  },
  watch: {
  },
  computed: {
  },
  methods: {
    fetchData () {
      getChoice({}).then(res => {
        if (res.code === 200) {
          this.onlineList = res.data.online || [];
          this.offlineList = res.data.offline || [];
          this.bannerList = res.data.banner || [];
          this.company = res.data.company || [];
        } else {
          this.$message.error(res.msg || '网络错误！')
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err || '网络错误！')
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .section {
    overflow: hidden;
  }
}
</style>
